<template>
  <!-- 转让许可情况 -->
  <div>
    <v-layout>
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title">
            <i></i>
            {{ $t("assessment.TransferLicense") }}
            <!-- <div class="el-icon-full-screen" @click="handFillClick" style="position:absolute;right:20px;top:20px;"></div> -->
          </v-card-title>
          <div v-show="isHaveData === true">
            <div id="chartTwo" style="width: 100%;height: 760px;"></div>
          </div>
          <div v-if="isHaveData === false" class="no-data">
            {{ $t("assessment.NoDataAvailable") }}
          </div>
          <!-- tooltip -->
          <div class="chart-tooltip">
            <el-table
              :data="tipCurrentData"
              style="width: 100%;"
              :header-cell-style="patentHeaderStyle"
              :cell-style="patentCellStyle"
              class="courtList"
            >
              <el-table-column prop="label" label="专利号" width="180">
                <template slot-scope="scope">
                  <a
                    href="javascript:void(0);"
                    @click.stop="goPn2(scope.row.label)"
                    class="cilck_link"
                    >{{ scope.row.label }}</a
                  >
                </template>
                <!-- <template slot-scope="scope">{{scope.row.label}}</template> -->
              </el-table-column>
              <el-table-column prop="source" label="变更前"></el-table-column>
              <el-table-column prop="target" label="变更后"></el-table-column>
            </el-table>
            <!-- <p v-for="(item, index) in tipCurrentData" :key="index">{{item.label}}</p> -->
            <div class="tooltip-pagination">
              <el-pagination
                background
                layout="total, prev, pager, next"
                :total="tipTotal"
                :page-size="tipPageSize"
                :current-page.sync="tipCurrentPage"
                @current-change="getTipCurrentPage"
                class="el-pagination"
              ></el-pagination>
            </div>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
    <!-- 专利质押情况 -->
    <v-layout>
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title">
            <i></i>
            {{ $t("assessment.PatentPledge") }}
          </v-card-title>
          <el-table
            :data="tableData"
            :span-method="objectSpanMethod2"
            style="width: 100%; margin-top: 20px;"
            :header-cell-style="patentHeaderStyle"
            :cell-style="patentCellStyle"
            class="courtList"
          >
            <el-table-column
              prop="pn"
              :label="$t('assessment.InvolvedPatent')"
              width="180"
            >
              <template slot-scope="scope">
                <a
                  href="javascript:void(0);"
                  @click.stop="goPn(scope.$index, tableData)"
                  class="cilck_link"
                  >{{ scope.row.pn }}</a
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="contractRecordNo"
              :label="$t('assessment.PledgeNo')"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="recordDate"
              :label="$t('assessment.EffectiveDate')"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="transferor"
              :label="$t('assessment.Pledgor')"
            ></el-table-column>
            <el-table-column
              prop="zhiquanren"
              :label="$t('assessment.Pledgee')"
            >
              <template slot-scope="scope">
                <p :title="scope.row.zhiquanren">{{ scope.row.zhiquanren }}</p>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('assessment.CancellationDate')"
              width="120"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.zhiyaJiechuri }}</p>
              </template>
            </el-table-column>
            <!-- assessment.Pledgee -->
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="lawTotal"
              :page-size="lawPageSize"
              :current-page.sync="lawCurrentPage"
              @current-change="getLawCurrentPage"
              class="el-pagination"
            ></el-pagination>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
    <!-- 专利纠纷情况 -->
    <v-layout>
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title">
            <i></i>
            {{ $t("assessment.PatentDispute") }}
          </v-card-title>
          <div class="courtList">
            <el-table :data="managementTableData">
              <el-table-column
                prop="patentNo"
                :label="$t('assessment.PublicNoticeNo')"
              ></el-table-column>
              <el-table-column
                prop="title"
                :label="$t('assessment.CauseTitle')"
              ></el-table-column>
              <el-table-column
                prop="plComp"
                :label="$t('assessment.Plaintiff')"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.plComp || "-" }}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="deComp"
                :label="$t('assessment.Defendant')"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.defendant || "-" }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="url" :label="$t('assessment.Details')">
                <template slot-scope="scope">
                  <a :href="scope.row.url" target="_blank" class="sp-url"
                    >详情</a
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="suitTotal"
                :page-size="suitPageSize"
                :current-page.sync="suitCurrentPage"
                @current-change="getSuitCurrentPage"
                class="el-pagination"
              ></el-pagination>
            </div>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
    <!-- 软件著作权信息 -->
    <v-layout style="display:none">
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title">
            <i></i>
            {{ $t("assessment.SoftwareInfo") }}
          </v-card-title>
          <div class="courtList">
            <el-table :data="softwareTableData">
              <el-table-column
                prop="index"
                :label="$t('assessment.SN')"
                width="60"
                align="center"
              ></el-table-column>
              <el-table-column prop="name" label="软件名称"></el-table-column>
              <el-table-column
                prop="number"
                :label="$t('assessment.RegistrationNo')"
              ></el-table-column>
              <el-table-column
                prop="version"
                label="版本号"
                width="70"
                align="center"
              ></el-table-column>
              <el-table-column prop="type_num" label="分类号"></el-table-column>
              <el-table-column
                prop="first_date"
                label="登记批准日期"
              ></el-table-column>
              <el-table-column
                prop="short_name"
                label="软件简称"
              ></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="softTotal"
                :page-size="softPageSize"
                :current-page.sync="softCurrentPage"
                @current-change="getSoftCurrentPage"
                class="el-pagination"
              ></el-pagination>
            </div>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
    <!-- 资质认证 -->
    <v-layout style="display:none">
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title"> <i></i>资质认证 </v-card-title>
          <div class="courtList">
            <el-table :data="certificationTableData">
              <el-table-column
                prop="index"
                :label="$t('assessment.SN')"
                width="60"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="type"
                label="证书类型"
                width="140"
              ></el-table-column>
              <el-table-column
                prop="num"
                label="证书编号"
                width="140"
              ></el-table-column>
              <el-table-column
                prop="issue_date"
                label="发证日期"
                width="100"
                align="center"
              ></el-table-column>
              <el-table-column prop="remarks" label="备注">
                <template slot-scope="scope">
                  <p :title="scope.row.remarks" style="text-align:left">
                    {{ scope.row.remarks.substr(0, 80) }}...
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop label width="140" align="center">
                <template slot-scope="scope">
                  <div class="detail-btn" @click="showDetails(scope)">
                    查看详情
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="certTotal"
                :page-size="certPageSize"
                :current-page.sync="certCurrentPage"
                @current-change="getCertCurrentPage"
                class="el-pagination"
              ></el-pagination>
            </div>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
    <!-- 专利纠纷-判决内容 -->
    <!-- <v-dialog v-model="managementDialogVisible" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">资质认证</span>
        </v-card-title>
        <v-card-text style="padding-bottom: 0">
            <p class="dialog-txt">{{managementDialogContent}}</p>
        </v-card-text>
      </v-card>
    </v-dialog>-->
    <!-- 资质认证-查看详情 -->
    <v-dialog v-model="dialogVisible" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">资质认证</span>
        </v-card-title>
        <v-card-text style="padding-bottom: 0">
          <ul class="cert-info">
            <li>
              <span>发证日期</span>
              <span>{{ certDialogData.issue_date }}</span>
            </li>
            <li>
              <span>证书类别</span>
              <span style="width:140px">{{ certDialogData.type }}</span>
              <span>截止日期</span>
              <span>{{ certDialogData.validity_end }}</span>
            </li>
            <li>
              <span>证书编号</span>
              <span style="width:140px">{{ certDialogData.num }}</span>
              <span>{{ $t("assessment.Status") }}</span>
              <span>{{ certDialogData.status }}</span>
            </li>
            <li>
              <span>备注</span>
              <span>{{ certDialogData.remarks }}</span>
            </li>
          </ul>
        </v-card-text>
      </v-card>
    </v-dialog>
    <chartFull ref="full" />
  </div>
</template>

<script>
import Ecolors from "@/utils/chartsColors.js";
import vPagination from "./components/common/vPagination";
import chartFull from "./chartFull";
export default {
  components: {
    vPagination,
    chartFull,
  },
  data() {
    return {
      companyName: this.$cookie.get("companyName") || "",
      // 专利质押
      tableData: [],
      lawTotal: 0,
      lawCurrentPage: 1,
      lawPageSize: 5,
      spanArr: [],
      spanArr2: [],
      chartTwo: "",
      isHaveData: true,
      chartTwoData: {
        name: [],
        data: [],
        links: [],
      },
      tipData: [],
      tipCurrentData: [],
      tipTotal: 0,
      tipCurrentPage: 1,
      tipPageSize: 5,
      patentHeaderStyle: function() {
        return "font-weight: 600; color: #03b38c;";
      },
      patentCellStyle: function() {
        return "color: #7674a3";
      },
      // 专利纠纷
      managementTableData: [],
      managementDialogVisible: false,
      managementDialogContent: "",
      suitTotal: 0,
      suitCurrentPage: 1,
      suitPageSize: 5,
      // 软件著作权信息
      softwareTableData: [],
      softTotal: 0,
      softSkip: 0, // 分页
      softCurrentPage: 1,
      softPageSize: 5,
      // 资质认证
      certificationTableData: [],
      certTotal: 0,
      certSkip: 0,
      certCurrentPage: 1,
      certPageSize: 5,
      dialogVisible: false,
      certDialogData: [],
    };
  },
  filters: {
    fil: function(value) {
      if (!value) return "-";
    },
  },
  methods: {
    handFillClick() {
      this.$nextTick(() => {
        this.$refs.full.init();
      });
    },
    // 专利质押
    getLawstatus() {
      this.$get(this.$Url.patent.lawstatus, {
        companyName: this.companyName,
        ipi: this.lawCurrentPage,
        ips: this.lawPageSize,
      })
        .then((data) => {
          let res = data.data && data.data.result;
          if (res) {
            this.lawTotal = res.total;
            this.tableData = [];
            let lawDataList = res.result;
            for (let i = 0; i < lawDataList.length; i++) {
              let lawDataListI = lawDataList[i];
              try {
                let obj = {
                  pn: lawDataListI.pn,
                  contractRecordNo: lawDataListI.dengjihao
                    ? lawDataListI.dengjihao
                    : "",
                  recordDate: lawDataListI.dengjishengxiaori
                    ? `${lawDataListI.dengjishengxiaori.substr(
                        0,
                        4
                      )}-${lawDataListI.dengjishengxiaori.substr(
                        4,
                        2
                      )}-${lawDataListI.dengjishengxiaori.substr(6, 2)} `
                    : "",
                  transferor: lawDataListI.chuzhiren
                    ? lawDataListI.chuzhiren
                    : "",
                  zhiyaJiechuri: lawDataListI.zhiyaJiechuri
                    ? `${lawDataListI.zhiyaJiechuri.substr(
                        0,
                        4
                      )}-${lawDataListI.zhiyaJiechuri.substr(
                        4,
                        2
                      )}-${lawDataListI.zhiyaJiechuri.substr(6, 2)} `
                    : "-",
                  zhiquanren: lawDataListI.zhiquanren
                    ? lawDataListI.zhiquanren
                    : "-",
                };
                this.tableData.push(obj);
              } catch (error) {}
            }
            this.rowspan2();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getLawCurrentPage(val) {
      this.lawCurrentPage = val;
      this.getLawstatus();
    },
    // 转让许可
    getPatentLegal() {
      this.$get(this.$Url.patent.patentLegal, {
        companyName: this.companyName,
        //dataType: "patentLegal"
      })
        .then((data) => {
          // console.log(data)
          if (data.data) {
            // let patentLegal = data.data.patentLegal;
            let patentLegal = data.data;
            if (
              patentLegal.transfer.node.length <= 0 &&
              patentLegal.divert.node.length <= 0
            ) {
              this.isHaveData = false;
              return;
            }
            this.chartTwo = this.$echarts.init(
              document.getElementById("chartTwo")
            );

            // 转让许可 divert:转让 transfer:许可
            let optionObj = {
              tooltip: {
                trigger: "item",
                alwaysShowContent: false,
                enterable: true,
                confine: true,
                extraCssText:
                  "padding: 10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);color:#000;background-color: #fff;",
                position: (point, params, dom, rect, size) => {
                  let dataType = params.dataType;
                  if (dataType === "edge") {
                    let data = params.data.labelName;
                    let arr = data.split(",");
                    let str = "";
                    this.tipTotal = arr.length;
                    // tooltip位置
                    let px = point[0] + 500;
                    let pageX = document.body.clientWidth;
                    if (px <= pageX) {
                      $(".chart-tooltip").css({
                        display: "block",
                        left: point[0] + 10,
                        top: point[1] + 10,
                      });
                    } else {
                      $(".chart-tooltip").css({
                        display: "block",
                        left: point[0] - 510,
                        top: point[1] + 10,
                      });
                    }
                    let tipCurrentData = [];
                    let tipData = [];
                    for (let i = 0; i < arr.length; i++) {
                      let pn = "";
                      if (
                        arr[i].indexOf("（转让）") > -1 ||
                        arr[i].indexOf("（许可）") > -1
                      ) {
                        pn = arr[i].substr(0, arr[i].indexOf("（"));
                      }
                      tipData.push({
                        pn: pn,
                        label: arr[i],
                        source: params.data.source,
                        target: params.data.target,
                      });
                    }

                    this.tipData = tipData;
                    let begin = (this.tipCurrentPage - 1) * this.tipPageSize;
                    this.tipCurrentData = this.tipData.slice(
                      begin,
                      begin + this.tipPageSize
                    );
                  } else if (dataType === "node") {
                    $(".chart-tooltip").hide();
                  }
                  return [point[0] + 10, point[1] - 10];
                },
                formatter: (params) => {
                  let dataType = params.dataType;
                  if (dataType === "node") {
                    return params.name;
                  }
                },
              },
              animationDurationUpdate: 1500,
              animationEasingUpdate: "quinticInOut",
              series: [
                {
                  type: "graph",
                  symbolSize: "20",
                  edgeSymbol: ["", "arrow"],
                  data: [],
                  links: [],
                  roam: true,
                  label: {
                    normal: {
                      show: true,
                      formatter: "{b}",
                    },
                  },
                  lineStyle: {
                    normal: {
                      color: "source",
                    },
                  },
                },
              ],
            };
            this.chartTwo.setOption(optionObj);

            // 获取关系图节点data参数
            let chartTwoData = {
              name: [],
              data: [],
              links: [],
            };

            for (let i = 0; i < patentLegal.transfer.node.length; i++) {
              let node = patentLegal.transfer.node[i];
              if (node !== "") {
                // if(node.length>8){
                //   node = node.slice(0, 8) + '\n' + node.slice(8)
                // }
                chartTwoData.name.push(node);
              }
            }
            for (let j = 0; j < patentLegal.transfer.link.length; j++) {
              let node = patentLegal.transfer.link[j].target;
              if (node !== "") {
                // if(node.length>8){
                //   node = node.slice(0, 8) + '\n' + node.slice(8)
                // }
                chartTwoData.name.push(node);
              }
            }
            for (let i = 0; i < patentLegal.divert.node.length; i++) {
              let node = patentLegal.divert.node[i];
              if (patentLegal.divert.node[i] !== "") {
                // if(node.length>8){
                //   node = node.slice(0, 8) + '\n' + node.slice(8)
                // }
                chartTwoData.name.push(node);
              }
            }
            for (let j = 0; j < patentLegal.divert.link.length; j++) {
              let node = patentLegal.divert.link[j].target;
              if (patentLegal.divert.link[j].target !== "") {
                // if(node.length>8){
                //   node = node.slice(0, 8) + '\n' + node.slice(8)
                // }
                chartTwoData.name.push(node);
              }
            }

            chartTwoData.name = Array.from(new Set(chartTwoData.name));

            let color = Ecolors.color;
            for (let i = 0; i < chartTwoData.name.length; i++) {
              let name = chartTwoData.name[i];
              // if(name.length>10){
              //   name = name.slice(0, 10) + '\n' + name.slice(10)
              // }
              // console.log(name)
              let obj = {
                name: name,
                labelName: name,
                label: {
                  position: "bottom",
                  color: "#222",
                  // color: '#fff'
                },
                // symbolOffset: ['-25%', 0]
              };
              if (i > 50) {
                obj = {
                  ...obj,
                  itemStyle: {
                    normal: {
                      color: color[i % 51],
                    },
                  },
                };
              } else {
                obj = {
                  ...obj,
                  itemStyle: {
                    normal: {
                      color: color[i],
                    },
                  },
                };
              }
              chartTwoData.data.push(obj);
            }
            if (chartTwoData.data.length <= 2) {
              // chartTwoData.data[1].symbolOffset = ['20%', 0]
              for (let i = 0; i < chartTwoData.data.length; i++) {
                chartTwoData.data[i].x = 50 + 5 * i;
                chartTwoData.data[i].y = 50;
              }
            } else {
              // for(let i=0;i<chartTwoData.data.length;i++){
              //   chartTwoData.data[i].x = 200+10*i
              //   chartTwoData.data[i].y = 100+4*i
              // }
            }

            // 如果nodes节点只有一个则不展示
            if (chartTwoData.data.length <= 1) {
              this.divertNum = 0;
              return;
            }

            this.chartTwoData.name = chartTwoData.name;
            this.chartTwoData.data = chartTwoData.data;

            // 获取关系图links参数
            let transferLinkData = JSON.parse(
              JSON.stringify(patentLegal.transfer.link)
            );
            for (let j = 0; j < transferLinkData.length; j++) {
              transferLinkData[j].pn2 = transferLinkData[j].pn;
              for (let k = j + 1; k < transferLinkData.length; k++) {
                if (
                  transferLinkData[j].src === transferLinkData[k].src &&
                  transferLinkData[j].target === transferLinkData[k].target
                ) {
                  transferLinkData[
                    j
                  ].pn2 += `（许可）,${transferLinkData[k].pn}`;
                  transferLinkData.splice(k, 1);
                  k--;
                }
              }

              let src = transferLinkData[j].src;
              let target = transferLinkData[j].target;
              // if(src.length>8){
              //   src = src.slice(0, 8) + '\n' + src.slice(8)
              // }
              // if(target.length>8){
              //   target = target.slice(0, 8) + '\n' + target.slice(8)
              // }

              let obj = {
                source: src,
                target: target,
                name: transferLinkData[j].pn2,
                labelName: `${transferLinkData[j].pn2}（许可）`,
                lineStyle: {
                  color: "#aaa",
                  curveness: "0.1",
                },
              };
              chartTwoData.links.push(obj);
            }

            let divertLinkData = JSON.parse(
              JSON.stringify(patentLegal.divert.link)
            );
            for (let j = 0; j < divertLinkData.length; j++) {
              divertLinkData[j].pn2 = divertLinkData[j].pn;
              for (let k = j + 1; k < divertLinkData.length; k++) {
                if (
                  divertLinkData[j].src === divertLinkData[k].src &&
                  divertLinkData[j].target === divertLinkData[k].target
                ) {
                  divertLinkData[j].pn2 += `（转让）,${divertLinkData[k].pn}`;
                  divertLinkData.splice(k, 1);
                  k--;
                }
              }

              let src = divertLinkData[j].src;
              let target = divertLinkData[j].target;
              // if(src.length>8){
              //   src = src.slice(0, 8) + '\n' + src.slice(8)
              // }
              // if(target.length>8){
              //   target = target.slice(0, 8) + '\n' + target.slice(8)
              // }

              let obj = {
                source: src,
                target: target,
                name: divertLinkData[j].pn2,
                labelName: `${divertLinkData[j].pn2}（转让）`,
                lineStyle: {
                  color: "#aaa",
                  curveness: "0.2",
                },
              };
              if (divertLinkData.length <= 1) {
                obj["lineStyle"] = {
                  color: "#aaa",
                };
              }
              chartTwoData.links.push(obj);
            }

            this.chartTwoData.links = chartTwoData.links;

            if (
              this.chartTwoData.data.length <= 0 ||
              this.chartTwoData.links.length <= 0
            ) {
              this.isHaveData = false;
            } else {
              this.isHaveData = true;
            }
            let option = {};
            option = {
              animationDurationUpdate: 1500,
              animationEasingUpdate: "quinticInOut",
              series: [
                {
                  type: "graph",
                  layout: "circular",
                  draggable: true,
                  symbol: "circle",
                  // symbol: 'rect',
                  symbolSize: (value, params) => {
                    // return [36 + params.name.length * 10, 24]
                    return 24;
                    // return [140, 36]
                  },
                  edgeSymbol: ["", "arrow"],
                  edgeSymbolSize: [0, 10],
                  roam: true,
                  focusNodeAdjacency: false,
                  lineStyle: {
                    normal: {
                      color: "source",
                    },
                  },
                  data: this.chartTwoData.data,
                  links: this.chartTwoData.links,
                },
              ],
            };
            // 如何data数据较少，则不旋转标签
            if (this.chartTwoData.data.length <= 2) {
              option.series[0]["layout"] = "none";
              option.series[0]["width"] = "30%";
              option.series[0]["force"] = {
                // repulsion: 50,
                // edgeLength: 10,
                // edgeLength: [100, 160]
              };
            } else {
              option.series[0]["height"] = "70%";
              option.series[0]["top"] = "20";
              option.series[0]["force"] = {
                // repulsion: 50,
                // gravity: 0.1,
                // edgeLength: [60, 80]
              };
            }
            this.chartTwo.setOption(option);

            window.addEventListener("resize", () => {
              setTimeout(() => {
                this.chartTwo.resize();
              }, 400);
            });
            this.$Bus.$on("chartResize", (data) => {
              if (data.active === "") {
                this.$nextTick(() => {
                  this.chartTwo.resize();
                });
              }
            });
          }
        })
        .catch((error) => {});
    },
    getTipCurrentPage(val) {
      this.tipCurrentPage = val;
      let begin = (this.tipCurrentPage - 1) * this.tipPageSize;
      this.tipCurrentData = this.tipData.slice(begin, begin + this.tipPageSize);
    },
    goPn(index, row) {
      let p = row[index].ap || row[index].ZLH || row[index].pn;
      this.$router.push({
        name: "patentDetails",
        query: {
          pn: p,
          active: 1,
        },
      });
    },
    goPn2(label) {
      let pn = label.split("（")[0];
      this.$router.push({
        name: "patentDetails",
        query: {
          pn: pn,
          active: 1,
        },
      });
    },
    getCurrentPage(val) {
      this.ips = Number(val) - 1;
      //   this.queryOneList()
    },
    // 专利纠纷
    getSuit() {
      this.$get(this.$Url.patent.suit, {
        companyName: this.companyName,
        ipi: this.suitCurrentPage,
        ips: this.suitPageSize,
      })
        .then((res) => {
          let data = res.data;
          if (data) {
            this.suitTotal = data.total;
            this.managementTableData = data.result;
          }
        })
        .catch((error) => {});
    },
    getSuitCurrentPage(val) {
      this.suitCurrentPage = val;
      this.getSuit();
    },
    aaa(scope) {
      console.log(scope);
    },
    // 软件著作权信息
    getSoftwareInfo() {
      this.$post(this.$Url.patent.softwareCopyright, {
        name: this.companyName,
        url: "copyrightsoft",
        skip: this.softSkip,
        psize: this.softPageSize,
      })
        .then((data) => {
          if (data.data) {
            this.softTotal = data.data.total;
            this.softwareTableData = data.data.items;
            this.softwareTableData.forEach((v, index) => {
              v.index = this.softSkip + (index + 1);
            });
          }
        })
        .catch((error) => {});
    },
    getSoftCurrentPage(val) {
      this.softCurrentPage = val;
      this.softSkip = (val - 1) * this.softPageSize;
      this.getSoftwareInfo();
    },
    // 资质认证
    qualificationCert() {
      this.$post(this.$Url.patent.certification, {
        name: this.companyName,
        url: "certificate",
        skip: this.certSkip,
        psize: this.certPageSize,
      })
        .then((data) => {
          if (data.data) {
            this.certTotal = data.data.total;
            this.certificationTableData = data.data.items;
            this.certificationTableData.forEach((v, index) => {
              v.index = this.certSkip + (index + 1);
            });
          }
        })
        .catch((error) => {});
    },
    getCertCurrentPage(val) {
      this.certCurrentPage = val;
      this.certSkip = (val - 1) * this.certPageSize;
      this.qualificationCert();
    },
    // 查看详情
    showDetails(scope) {
      this.certDialogData = scope.row;
      this.dialogVisible = true;
    },
    //
    rowspan(data) {
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].name1 === data[i - 1].name1) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 专利质押
    rowspan2() {
      let spanArr2 = [],
        contactDot = 0;
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr2.push(1);
        } else {
          if (item.pn === this.tableData[index - 1].pn) {
            spanArr2[contactDot] += 1;
            spanArr2.push(0);
          } else {
            spanArr2.push(1);
            contactDot = index;
          }
        }
      });
      this.spanArr2 = spanArr2;
    },
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    toPatentDetail(pn) {
      this.$router.push({
        name: "patentDetails",
        query: {
          p: pn,
        },
      });
    },
  },
  mounted() {
    this.getLawstatus();
    this.getPatentLegal();
    this.getSuit();
    // 软件著作权信息 暂时注掉
    // this.getSoftwareInfo()
    // 资质认证 暂时注掉
    // this.qualificationCert()
    window.toPatentDetail = this.toPatentDetail;
    $(".chart-tooltip")
      .on("mouseenter", () => {
        $(".chart-tooltip").show();
      })
      .on("mousemove", () => {
        $(".chart-tooltip").show();
      })
      .on("mouseout", () => {
        // $('.chart-tooltip').hide()
      });

    $("#chartTwo").on("click", (params) => {
      $(".chart-tooltip").hide();
    });
  },
};
</script>

<style lang="scss" scoped>
.vflex {
  margin-bottom: 20px;
}
.vflex.right {
  margin-right: 15px;
}
.vcard {
  width: 100%;
  height: 100%;
}
.vcard-title {
  position: relative;
  padding-top: 20px !important;
  font-size: 14px;
  font-weight: 600;
  color: $mainColor;
}
.vcard-title i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 20px;
  margin-top: -8px;
  background-color: $mainColor;
}
.pagination {
  margin-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
.el-pagination {
  padding-right: 0;
}
.detail-btn {
  display: inline-block;
  width: 81px;
  padding: 4px 0;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  color: #6f6dd8;
  background-color: #e7e7fc;
  cursor: pointer;
}
.detail-btn:hover {
  font-size: 600;
  color: #fff;
  background-color: $mainColor;
}
.cert-info {
  list-style: none;
  padding-left: 0;
  padding-bottom: 20px;
  border: 1px solid #ececf5;
}
.cert-info li {
  border: 1px #ececf5 solid;
  color: #838895;
}
.cert-info li span {
  display: table-cell;
  /* width: 200px; */
  /* max-width: 380px;
  max-height: 296px; */
  padding: 14px 8px;
  word-break: break-all;
  vertical-align: middle;
  font-size: 12px;
}
.cert-info li span:nth-child(odd) {
  width: 151px;
  font-weight: 600;
  color: $mainColor;
  background-color: #f9f9ff;
}
.cert-info li span:nth-child(even) {
  /* width: 200px; */
  line-height: 20px;
}
.dialog-txt {
  margin-bottom: 0;
}
.no-data {
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid #a9a7e8;
  text-align: center;
  font-size: 12px;
  color: #909399;
}
.chart-tooltip {
  display: none;
  position: absolute;
  z-index: 10;
  width: 500px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.tooltip-pagination {
  margin-top: 10px;
  text-align: center;
}
.sp-url {
  cursor: pointer;
}
</style>
